import { ref, Ref, onMounted, onUnmounted } from 'vue'
export default function useClickOutside (elementRef: Ref):Ref<boolean> {
  const isClickOutSide = ref(false)
  const handler = (e: MouseEvent) => {
    if (elementRef.value) {
      // 包含 说明点击的外部
      if (elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutSide.value = false
      } else {
        isClickOutSide.value = true
      }
    }
  }

  onMounted(() => {
    document.addEventListener('click', handler)
  })

  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })
  return isClickOutSide
}
